<!--
/**
* Author: txj
* Date:2023年10月20日17:31:51 
* Desc: 会员卡充值结果
*/
-->
<template>
  <yy-page :linear-bg="true">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
    <yy-navbar :border="false" :title="title" left-icon-color="#fff" title-color="#fff" :auto-back="false" @left-click="backClick"></yy-navbar>
    <!-- #endif-->
    <view v-if="success">
      <view class="flex flex-col-bottom flex-c mt30 mb10">
        <view class="money-icon b">￥</view>
        <view class="money b">{{ orderInfo.amount }}</view>
      </view>
      <view class="fs26 fc-white tc">会员卡余额已到账</view>
      <card-item one-item :card="orderInfo.cardInfo"></card-item>
    </view>
    <view v-else>
      <view class="flex flex-c-m mt30 mb10">
        <u-icon @click="handelClear" class="mr10" size="22" color="#ffffff" name="close-circle" />
        <view class="fs36 fc-white tc b">充值失败</view>
      </view>
      <view class="fs26 fc-white tc">支付金额已原路退回</view>
    </view>
    <view class="pay-info">
      <pay-info show-status :order-info="orderInfo"></pay-info>
    </view>
  </yy-page>
</template>

<script>
  import CardItem from './components/cardItem.vue'
  import PayInfo from '@/components/PayInfo'
  export default {
    // 挂载组件
    components: { CardItem, PayInfo },

    // 数据
    data() {
      return {
        success: true,
        title: '',
        orderInfo: {}
      }
    },
    onLoad(option) {
      this.query = option
      this.success = this.query.success
      this.orderId = this.query.orderId
      console.log(this.success, 'onLoad')
      if (this.success) {
        console.log(this.success, '充值成功')
        this.title = '充值成功'
        uni.setNavigationBarTitle({ title: '充值成功' })
      } else {
        console.log(this.success, '充值失败')
        this.title = '充值失败'
        uni.setNavigationBarTitle({ title: '充值失败' })
      }
      uni.$api.memberCard.getOrderInfo({ orderId: this.orderId }).then((res) => {
        this.orderInfo = res
      })
    },
    // 计算属性
    computed: {},

    // 挂载完成
    mounted() {},

    // 创建完成
    created() {},

    // 挂载方法
    methods: {
      backClick() {
        this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .money-icon {
    font-size: 40rpx;
    line-height: 40rpx;
    color: white;
  }
  .money {
    font-size: 50rpx;
    line-height: 50rpx;
    color: white;
  }
  .pay-info {
    border-radius: 20rpx;
    margin: 20rpx;
    background: white;
    overflow: hidden;
  }
</style>
